import {View,Text, ImageBackground,StyleSheet,TextInput,TouchableOpacity,ToastAndroid} from 'react-native';
import React,{useLayoutEffect,useState,useEffect} from 'react';
import './global';
import { Ionicons } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';




function Login({navigation}){
    const [username,setUsername] = useState('');
    const [password,setpassword] = useState('');
    const [data,setData] = useState({ username: '' , password: '' });
    const url = 'http://175.27.190.73:9000/userLogin';

    useEffect(() => {
      setData({ username: username , password: password });
    }, [username]);
    useEffect(() => {
      setData({ username: username , password: password });
    }, [password]);
    
    const getData=()=>{
      setData({ username: username , password: password });
      console.log(data);
      fetch(url, {
        method: 'POST', 
        body:JSON.stringify(data),
        headers: new Headers({
          'Content-Type': 'application/json'
        })
      })
      .then(res => res.json())
      .then(res=> {
	 	    console.log(res)
        if(res.msg == "登录成功"){
            ToastAndroid.show(res.msg,ToastAndroid.SHORT);
            navigation.navigate('User');
            localStorage['user'] = JSON.stringify(res.userInf[0]);
        }else{
           ToastAndroid.show('登录失败，账号或密码错误',ToastAndroid.SHORT)
       }
      })
      .catch(error =>{
		    console.log('error')
      })
    }


    return(
        <View>
            <ImageBackground 
                resizeMode='cover'
                source={require("../assets/bg11.png")}
                style={{height:p2d(1340),width:'100%',position:'absolute',opacity:1,position:'absolute'}}
            >
            </ImageBackground>
            <View style={styles.header}>
                <Text style={styles.login1}>登录</Text>
                <TouchableOpacity style={styles.registerbtn} onPress={()=>{navigation.navigate('Register')}}> 
                    <Text style={styles.register} >快速注册</Text>
                </TouchableOpacity>
                   
            </View>
            <View style={styles.login}>
                <View style={styles.account}>
                    <View style={styles.currency}>
                        <Ionicons name="ios-person" size={p2d(70)} color="black" style={{position:'absolute',top:p2d(15)}} />
                    </View>
                    <TextInput 
                    placeholder="请输入手机号"
                    style={styles.textinput}
                    onChangeText={setUsername}></TextInput>
                </View>
                
                <View style={styles.password}>
                    <View style={styles.currency}>
                        <AntDesign name="unlock" size={p2d(70)} color="black"  style={{position:'absolute',top:p2d(15)}}/>
                    </View>
                    <TextInput 
                        placeholder="请输入密码"
                        style={styles.textinput}
                        onChangeText={setpassword}
                        secureTextEntry={true}>
                    </TextInput>
                </View>
            </View>
            <View style={styles.in}>
                <TouchableOpacity style={{width:'100%',height:p2d(100),}} onPress={getData}>
                    <Text style={styles.incontext}>登录</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.bottom}>
                
            </View>
        </View>
    )
}
const styles =StyleSheet.create({
    login:{
        width:'80%',
        backgroundColor:'#F0F8FF',
        height:p2d(300),
        opacity:0.7,
        borderRadius:p2d(25),
        top:p2d(300),
        left:'10%'
    },
    header:{
        height:p2d(100),
    },
    font:{
        fontSize:p2d(50),
    },
    in:{
        width:'80%',
        backgroundColor:'white',
        height:p2d(100),
        opacity:0.5,
        borderRadius:p2d(25),
        top:p2d(350),
        left:'10%'
    },
    login1:{
        position:'absolute',
        lineHeight:p2d(125),
        fontSize:p2d(40),
        left:p2d(320),
        color:'white',
        borderBottomWidth:p2d(2)
        
    },
    register:{
        height:p2d(80),
        width:p2d(160),
        right:p2d(10),
        color:'white',
        fontSize:p2d(30)

    },
    incontext:{
        position:'absolute',
        fontSize:p2d(40),
        lineHeight:p2d(100),
        color:'black',
        left:p2d(240),
    },
    account:{
        height:p2d(150),
        borderBottomWidth:p2d(3),
        borderBottomColor:'white',
    },
    currency:{
        height:p2d(100),
        borderRightWidth:p2d(3),
        width:p2d(100),
        position:'absolute',
        top:p2d(25),
        left:p2d(30),
    },
    textinput:{
        height:p2d(100),
        position:'absolute',
        top:p2d(25),
        left:p2d(150),
        fontSize:p2d(30),
        width:p2d(640),
        color:'black'
    },
    bottom:{
        height:p2d(40),
        top:p2d(380),
        left:p2d(100),
    },
    remember:{
        position:'absolute',
        left:p2d(25),
        fontSize:p2d(23),
        color:'white'
    },
    button:{
        top:p2d(5),
        borderWidth:p2d(2),
        height:p2d(23),
        width:p2d(23),
        borderColor:'white'
    },
    forget:{
        position:'absolute',
        left:p2d(475),
        fontSize:p2d(23),
        color:'white'
    },
    registerbtn:{
        
        height:p2d(80),
        width:p2d(160),
        right:p2d(10),
        top:p2d(45),
        position:'absolute'
    },
})
export default Login;